.hp-nav-bar{
	height:155px;
}
.hp-nav-group,.hp-nav-items{
	width:100%;
	height:inherit;
	font-size:0;
	padding-left: 8px;
}
.hp-nav-items{
	text-align: center;
}
.hp-nav-item{
//	float: left;
	display: none;
	position:relative;
	top: -5px;
	padding-top: 5px;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	@include fn-transition(all .4s ease);
	&.one-item{
		width:147px;
		height:154px;
		background-image:url(#{$firstlevel-path}images/index/hp-nav-bg1.png);
	}
	&.two-item{
		width:147px;
		height:134px;
		background-image:url(#{$firstlevel-path}images/index/hp-nav-bg2.png);
	}
	&.three-item{
		width:146px;
		height:144px;
		background-image:url(#{$firstlevel-path}images/index/hp-nav-bg3.png);
	}
	&.four-item{
		width:143px;
		height:124px;
		background-image:url(#{$firstlevel-path}images/index/hp-nav-bg4.png);
	}
	&.five-item{
		width:147px;
		height:144px;
		background-image:url(#{$firstlevel-path}images/index/hp-nav-bg5.png);
	}
	&.six-item{
		width:144px;
		height:134px;
		background-image:url(#{$firstlevel-path}images/index/hp-nav-bg6.png);
	}
	&.seven-item{
		width:143px;
		height:124px;
		background-image:url(#{$firstlevel-path}images/index/hp-nav-bg7.png);
	}
	&.eight-item{
		width:147px;
		height:144px;
		background-image:url(#{$firstlevel-path}images/index/hp-nav-bg8.png);
	}
}
.hp-nav-link{
	display:block;
	width:100%;
	height:155px;
	text-align:center;
}
.nav-c-tit,.nav-e-tit{
	display:block;
	width:100%;
	color:#f7edcf;
	@include fn-text-shadow(1px 0 2px rgba(4,0,0,.1));
}
.nav-c-tit{
	padding-top:48px;
	font-size:18px;
}
.nav-e-tit{
	font-size:12px;
	@include fn-opacity-compatible(.4);
}

.animation{
	.one-item{
		animation:navEnter .3s ease-out forwards;
		-moz-animation:navEnter .3s ease-out forwards; /* Firefox */
		-webkit-animation:navEnter .3s ease-out forwards; /* Safari and Chrome */
		-o-animation:navEnter .3s ease-out forwards;
	}
	.two-item{
		animation:navEnter 1s ease-out forwards;
		-moz-animation:navEnter 1s ease-out forwards; /* Firefox */
		-webkit-animation:navEnter 1s ease-out forwards; /* Safari and Chrome */
		-o-animation:navEnter 1s ease-out forwards;
	}
	.three-item{
		animation:navEnter .6s ease-out forwards;
		-moz-animation:navEnter .6s ease-out forwards; /* Firefox */
		-webkit-animation:navEnter .6s ease-out forwards; /* Safari and Chrome */
		-o-animation:navEnter .6s ease-out forwards;
	}
	.four-item{
		animation:navEnter .8s ease-out forwards;
		-moz-animation:navEnter .8s ease-out forwards; /* Firefox */
		-webkit-animation:navEnter .8s ease-out forwards; /* Safari and Chrome */
		-o-animation:navEnter .8s ease-out forwards;
	}
	.five-item{
		animation:navEnter .5s ease-out forwards;
		-moz-animation:navEnter .5s ease-out forwards; /* Firefox */
		-webkit-animation:navEnter .5s ease-out forwards; /* Safari and Chrome */
		-o-animation:navEnter .5s ease-out forwards;
	}
	.six-item{
		animation:navEnter .2s ease-out forwards;
		-moz-animation:navEnter .2s ease-out forwards; /* Firefox */
		-webkit-animation:navEnter .2s ease-out forwards; /* Safari and Chrome */
		-o-animation:navEnter .2s ease-out forwards;
	}
	.seven-item{
		animation:navEnter 1.2s ease-out forwards;
		-moz-animation:navEnter 1.2s ease-out forwards; /* Firefox */
		-webkit-animation:navEnter 1.2s ease-out forwards; /* Safari and Chrome */
		-o-animation:navEnter 1.2s ease-out forwards;
	}
	.eight-item{
		animation:navEnter .7s ease-out forwards;
		-moz-animation:navEnter .7s ease-out forwards; /* Firefox */
		-webkit-animation:navEnter .7s ease-out forwards; /* Safari and Chrome */
		-o-animation:navEnter .7s ease-out forwards;
	}
	.hp-nav-item{
		display: inline-block;
		top: -5px;
		&.hover{
			animation:navHover .3s ease-out forwards;
			-moz-animation:navHover .3s ease-out forwards; /* Firefox */
			-webkit-animation:navHover .3s ease-out forwards; /* Safari and Chrome */
			-o-animation:navHover .3s ease-out forwards;
			@include fn-opacity-compatible(.9);
			.nav-c-tit{
				color: #fff;
				@include fn-opacity-compatible(1);
			}
		}
	}
}
.show{
	.hp-nav-item{
		display: inline-block;
		top: -5px;
		&.hover{
			animation:navHover .3s ease-out forwards;
			-moz-animation:navHover .3s ease-out forwards; /* Firefox */
			-webkit-animation:navHover .3s ease-out forwards; /* Safari and Chrome */
			-o-animation:navHover .3s ease-out forwards;
			@include fn-opacity-compatible(.9);
			.nav-c-tit{
				color: #fff;
				@include fn-opacity-compatible(1);
			}
		}
	}
}

@keyframes navEnter{
	from {top:-160px;}
	to {top:-5px;}
}

@-moz-keyframes navEnter{
	from {top:-160px;}
	to {top:-5px;}
}

@-webkit-keyframes navEnter{
	from {top:-160px;}
	to {top:-5px;}
}

@-o-keyframes navEnter{
	from {top:-160px;}
	to {top:-5px;}
}

@keyframes navHover{
	from {top:-5px;padding-top:5px;}
	to {top:0px;padding-top:0px;}
}

@-moz-keyframes navHover{
	from {top:-5px;padding-top:5px;}
	to {top:0px;padding-top:0px;}
}

@-webkit-keyframes navHover{
	from {top:-5px;padding-top:5px;}
	to {top:0px;padding-top:0px;}
}

@-o-keyframes navHover{
	from {top:-5px;padding-top:5px;}
	to {top:0px;padding-top:0px;}
}

.ie9,.ie8{
	.animation .hp-nav-item{
		top: -5px;
	}
}
.g-idx-bg{
	background-color: #fff;
}